<template>
	<view class="status-des">
		<navBar title="病害现状" @click="() => {uni.navigateBack()}"></navBar>
		<view style="padding:40rpx">
			<u-search placeholder="请输入关键字" v-model="searchText"  :clearabled="false" :showAction="false" @search="fnQueryByKeys" @change="fnQueryByKeys"></u-search>
		</view>
		<view class="tag-show">
			<view class="tag-bck" :class="show ? 'xs': 'yc'" >
				<view class="tag-text" v-for="(item, index) in keysList" @click="chooseText(item.name)" :key="index">
					{{item.name}}
				</view>
			</view>
			<view class="icon-p" @click="show = !show">
				<u-icon name="arrow-down" v-if="show"></u-icon>
				<u-icon name="arrow-up" v-else></u-icon>
			</view>
		</view>
		
		<view class="icon-t" v-for="(it,i) in dataList" :key="it.id" @click='chooseList(it)'>
			<!-- :class="serial(i)" -->
			<view class="t-num">
				<!-- {{i+1}} -->
				{{ it.diseaseGrade || '' }}{{it.diseaseNo || ''}}
			</view>
			<view class="t-wen">
				{{it.diseaseStatus}}
			</view>
		</view>
	</view>
</template>

<script>
	import searchCom from "@/components/searchCom.vue"
	import {diseaseStatusList,diseaseKeywordsList} from "@/api/engineeringMaintenance/engineeringMaintenance.js"
	import {doGet} from "@/utils/offline/sqlite/index.js"
	import * as XUNJIAN from '@/api/engineeringMaintenance/engineeringMaintenance.js'
	export default {
		name: 'chooseStatus',
		data() {
			return {
				keysList: [],
				show: false,
				searchText: '',
				dataList: [],
				diseaseStatus:'' // 病害现状
			}
		},
		
		components: {
			searchCom
		},
		onLoad(option) {
			console.log(option.lineSiteSectionType, '----');
			if(option.lineSiteSectionType){
				this.lineSiteSectionType = option.lineSiteSectionType
			}
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('getList', (data) => {
				console.log("eventChannel", data)			
			})
			this.eventChannel = eventChannel
			this.getKeysList()
			this.getStatusList()
		},
		methods: {
			/**
			 * 病害现状列表(分页)
			 * **/
			getStatusList() {
				let resq = {
					currPage:1,
					pageSize:10000,
					params: {
						projectId:uni.getStorageSync('isOwner'),
						keyword:this.searchText
					}
				}
				// diseaseStatusList(resq)
				doGet(XUNJIAN.diseaseStatusList, resq)
				.then(res => {
					console.log(res,'现状');
					if(res.success) {
						this.dataList = res.result.list.filter(item => item.code === this.lineSiteSectionType)
						console.log(this.dataList,'现状数据');
					}
				})
			},
			//关键字列表
			getKeysList() {
				let resq = {
					currPage:1,
					pageSize:10000,
					params: {
						projectId:uni.getStorageSync('isOwner'),
						keyword:''
					}
				}
				// diseaseKeywordsList(resq)
				doGet(XUNJIAN.diseaseKeywordsList, resq)
				.then(res => {
					if(res.success) {
						this.keysList = res.result.list
					}
				})
			},
			/**
			 * 输入框值变化的时候
			 * @param {String} val
			 */
			fnQueryByKeys(val) {
				if(!val) {
					this.searchText = null
				}
				this.searchText = val
				this.getStatusList()
			},
			determine(ev) {
				console.log(ev)
			},
			// 关键词模糊搜索
			chooseText(name){
				this.searchText = name
			},
			// 获取现状数据
			chooseList(item){
				uni.navigateBack({
					success: () => {
						this.eventChannel.emit("setData", {
							data: item
						})
					}
				});							
			},
			serial(e){
				if(e === 0){ 
					return 'blue'
				}
				if(e === 1){
					return 'bh'
				}
				if(e === 2){
					return 'hui'
				}
			}
		
		}

	}
</script>

<style lang="scss" scoped>
	.status-des {
		/* #ifdef MP-WEIXIN */
			padding-top: 200rpx;
		/* #endif */
		.tag-show{
			position: relative;
			.icon-p {
				position: absolute;
				left: 84%;
				top: 2%;
				background: #F5F7FA;
				border-radius: 50rpx;
				padding: 6rpx 20rpx;
				text-align: center;
			}
		}
		

		.search-i {
			width: 90%;
			margin-left: 40rpx;
			position: relative;
		}

		.xs {
			// height: 184rpx;
			overflow: hidden;
		}

		.yc {
			max-width: 600rpx;
			// overflow: hidden;
			height: 78rpx;
			overflow: hidden;
		}

		.tag-bck {
			
			margin-left: 45rpx;
			margin-right: 120rpx;
			// margin-top: 40rpx;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;

			.tag-text {
				margin-left: 20rpx;
				margin-bottom: 20rpx;
				height: 46rpx;
				padding:6rpx 20rpx;
				background: #F5F7FA;
				border-radius: 50rpx;
			}
		}

		.icon-t {
		padding-right: 40rpx;
			margin-left: 40rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 24rpx;
			padding-bottom: 20rpx;
			border-bottom: 2rpx dashed #E0E7F6;

			.t-num {
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				min-width: 40rpx;
				height: 36rpx;
				text-align: center;
				line-height: 36rpx;
				background: linear-gradient(90deg, #ADC0DF 0%, #ABC4D3 100%);
				margin-right: 40rpx;
			}

			.t-wen {
				width: 85%;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #445469;
			}
			.blue{background: linear-gradient(90deg, #5295FE 0%, #3FB8FF 100%);}
			.bh{background: linear-gradient(90deg, #5295fec4 0%, #3fb8ffc4 100%);}
			.hui{background: linear-gradient(90deg, #5295fe7d 0%, #3fb8ff85 100%);}
		}
	}
</style>
